import index from "./index.scss";
import OrderHeader from "../../../components/order_wxq/orderHeader";
import OrderBreadcrumb from "../../../components/order_wxq/orderBreadcrumb";
import { Button, Space, Table, Image } from "antd";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import copy from "../../../utils/copy";
import moment from "moment";
//请求
import order from '../../../api/order_wxq'
function orderState(state) {
  switch (state) {
    case 0: return '代付款'; break;
    case 1: return '待发货'; break;
    case 2: return '已发货'; break;
    case 3: return '已完成'; break;
    case 4: return '已关闭'; break;
    case 5: return '售后中'; break;
  }
}
function TableList(props) {
  return (
    <div className="clumns-1 clumns">
      <div className="top">订单编号：{props.orderId}</div>
      <div className="bottom">
        <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"></Image>
        <div className="right">
          <p>{props.goodsName}</p>
          <div>
            <span>单价：{props.price}</span>
            <span>数量：1</span>
          </div>
        </div>
      </div>
    </div>
  );
}
function TableList2(props) {
  return (
    <div className="clumns-2 clumns">
      <div className="top">下单时间：{props.orderTime}</div>
      <div className="bottom">
        <Image src="https://joeschmoe.io/api/v1/random"></Image>
        <div className="right">
          <span>{props.userName}</span>
          <p>{props.phone}</p>
        </div>
      </div>
    </div>
  );
}
function TableList3(props) {
  return (
    <div className="clumns-3 clumns">
      <div className="top">{props.payWay}</div>
      <div className="bottom">小程序</div>
    </div>
  );
}
function TableList4(props) {
  return (
    <div className="clumns-4 clumns">
      <div className="top">配送</div>
      <div className="bottom">{props.distributionWay}</div>
    </div>
  );
}
function TableList5(props) {
  return (
    <div className="clumns-5 clumns">
      <div className="top">状态</div>
      <div className="bottom">{orderState(props.orderState)}</div>
    </div>
  );
}
function TableList6(props) {
  const navigate = useNavigate();
  const pathSkip = (id) => {

    navigate("/home/order/details", {
      replace: false,
      state: { content: id },
    });
  };
  return (
    <div className="clumns-6 clumns">
      <div className="top">实付款(元)：{props.content.price}</div>
      <div className="bottom">
        <Space size="middle">
          <a onClick={() => { pathSkip(props.content.orderId) }}>订单详情</a>
          <a
            onClick={() => {
              copy(props.content.orderId);
            }}
          >
            复制订单
          </a>
        </Space>
      </div>
    </div>
  );
}
const btnList = [
  { status: 0, name: "全部订单" },
  { status: 1, name: "待付款" },
  { status: 2, name: "待发货" },
  { status: 3, name: "已发货" },
  { status: 4, name: "已完成" },
  { status: 5, name: "已关闭" },
  { status: 6, name: "售后中" },
];
const columns = [
  {
    title: "商品信息",
    key: "shoopdata",
    render: (_, record) => TableList(record),
  },
  {
    title: "用户信息",
    key: "userdata",
    render: (_, record) => TableList2(record),
  },
  {
    title: "订单来源",
    key: "source",
    render: (_, record) => TableList3(record),
  },
  {
    title: "发货方式",
    key: "way",
    render: (_, record) => TableList4(record),
  },
  {
    title: "订单状态",
    key: "status",
    render: (_, record) => TableList5(record),
  },
  {
    title: "操作",
    key: "caozuo",
    render: (_, record) => <TableList6 content={record} />,
  },
];


const OrderSearch = () => {
  const [tableData, setTableData] = useState([])
  useEffect(() => {
    getOrder()
  }, [])
  //tabs顶部按钮
  const [isTopBtn, setIsTopBtn] = useState(0);
  const clickTopBtn = (value) => {
    setIsTopBtn(value);
  };
  const btnListRender = (arr) => {
    let list = [];
    arr.map((v, i) =>
      list.push(
        <Button
          className={v.status === isTopBtn ? "link" : "text"}
          onClick={() => {
            clickTopBtn(v.status);
          }}
          key={i}
        >
          {v.name}
        </Button>
      )
    );
    return list;
  };
  //选择
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },

    getCheckboxProps: (record) => ({}),
  };
  const showTotal = (total) => `数量 ${total} 条`;
  const [isCheckbox, setIsCheckbox] = useState(false);
  const clickCheckbox = () => {
    let boolean = !isCheckbox;
    setIsCheckbox(boolean);
  };
  //求情数据
  const getOrder = (obj) => {
    order.getOrderList(obj).then(res => {
      console.log(res);
      let obj = res.data
      obj.forEach(v => {
        v.orderTime = moment(v.orderTime).format('YYYY-MM-DD')
      });
      setTableData(res.data)
    })
  }
  return (
    <div>
      <OrderBreadcrumb tit={"订单管理"} pathName={"订单查询"} />
      <OrderHeader />
      <div style={index} className="container">
        <header>
          <span>订单列表</span>
          {/* <Button onClick={clickCheckbox}>批量操作</Button> */}
        </header>
        <div className="top-btn">
          <Space>{btnListRender(btnList)}</Space>
        </div>
        <div className="list-bottom">
          <Table
            rowKey={(record) => record.orderId}
            rowSelection={{
              type: "checkbox",
              ...rowSelection,
              columnWidth: "60px",
              hideSelectAll: false,
            }}
            pagination={{
              total: 50,
              showTotal: showTotal,
              showSizeChanger: true,
              showQuickJumper: true,
            }}
            columns={columns}
            dataSource={tableData}
          />
        </div>
      </div>
    </div>
  );
};
export default OrderSearch;
